import { create, query } from '@/services/user';
import { Button, Form, Input, message, Modal } from 'antd';
import React, { Component } from 'react';
import { connect } from 'umi';
import styles from './index.less';

const editUserLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 19 },
};

class ToolBar extends Component {
  state = {
    isCreateModalVisible: false,
    createUser: {},
    loading: false,
  };

  // 创建按钮
  onModelCreateOk = () => {
    this.form.submit();
  };

  // 关闭提交窗口
  onModelCreateCancel = () => {
    this.setState({ isCreateModalVisible: false });
  };

  // 创建提交
  onCreateFinish = (values) => {
    const { systemUser, dispatch } = this.props;
    const { query, page, page_size } = systemUser;
    this.setState({ loading: true });
    create(values).then((res) => {
      if (res.code === 200) {
        this.setState({ isCreateModalVisible: false });
        message.success('创建成功');
        if (dispatch) {
          dispatch({
            type: 'systemUser/fetchList',
            payload: {
              query: query,
              page: page,
              page_size: page_size,
            },
          });
        }
        this.form.resetFields();
      } else {
        message.error(res.msg);
      }
      this.setState({ loading: false });
    });
  };

  render() {
    const { loading } = this.state;
    return (
      <div className={styles.toolbar}>
        <Modal
          title="创建"
          visible={this.state.isCreateModalVisible}
          onOk={this.onModelCreateOk.bind(this)}
          onCancel={this.onModelCreateCancel.bind(this)}
          footer={[
            <Button key="back" onClick={this.onModelCreateCancel.bind(this)}>
              退出
            </Button>,
            <Button
              key="submit"
              type="primary"
              loading={loading}
              onClick={this.onModelCreateOk.bind(this)}
            >
              创建
            </Button>,
          ]}
        >
          <Form
            name="basic"
            {...editUserLayout}
            initialValues={this.state.createUser}
            ref={(ref) => (this.form = ref)}
            onFinish={this.onCreateFinish.bind(this)}
            className={styles.create_form}
          >
            <Form.Item
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名' }]}
            >
              <Input className={styles.item} />
            </Form.Item>
            <Form.Item
              label="邮箱"
              name="email"
              rules={[
                {
                  type: 'email',
                  message: 'The input is not valid E-mail!',
                },
              ]}
            >
              <Input className={styles.item} />
            </Form.Item>
            <Form.Item label="手机号" name="phone">
              <Input className={styles.item} />
            </Form.Item>
          </Form>
        </Modal>
        <Button
          className={styles.item}
          onClick={() => {
            this.setState({ isCreateModalVisible: true });
          }}
        >
          创建
        </Button>
        <Button className={styles.item}>导出</Button>
      </div>
    );
  }
}
export default connect(({ systemUser }) => ({
  systemUser,
}))(ToolBar);
